import React,{Component} from 'react';
import {Carousel,CarouselItem,CarouselControl,CarouselIndicators,CarouselCaption} from 'reactstrap';
import {connect} from 'react-redux';
import { fetchList } from '../actions'

const mapStateToProps = (state)=>{
  return {
      rows: state.counter.list.rows,
      total:state.counter.list.total
  }
}

const items = [
  {
    src: 'https://img004.mllres.com/images/201809/1536110533757845366.jpg',
  },
  {
    src: 'http://image.meilele.com/images/201810/1540863360860771683.jpg',
  },
  {
    src: 'http://img002.mllres.com/images/201812/1545766076327104353.jpg',
  },
  {
    src: 'http://img003.mllres.com/images/201808/1533778323996774457.jpg',
  }
];

class Home extends Component{
  componentDidMount(){
    this.props.fetchList();
  }
  //轮播
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.goToIndex = this.goToIndex.bind(this);
    this.onExiting = this.onExiting.bind(this);
    this.onExited = this.onExited.bind(this);
  }
  onExiting() {
    this.animating = true;
  }
  onExited() {
    this.animating = false;
  }
  next() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
    this.setState({ activeIndex: nextIndex });
  }
  previous() {
    if (this.animating) return;
    const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
    this.setState({ activeIndex: nextIndex });
  }
  goToIndex(newIndex) {
    if (this.animating) return;
    this.setState({ activeIndex: newIndex });
  }
  showRows(){
    var jsx=[];
    this.props.rows.map((item,index)=>{
      jsx.push(<li key={index} className="productList">
          <img src={item.img} width="100" height="100"/>
          <p>{item.title}</p>
          <span>￥&nbsp;{item.price}</span>
      </li>) ;
    })
    return jsx;
  }

  render() {
    const { activeIndex } = this.state;
    const slides = items.map((item) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
        </CarouselItem>
      );
    });

    return (
        <div>
          <Carousel
            activeIndex={activeIndex}
            next={this.next}
            previous={this.previous}
          >
            <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
            {slides}
            <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
            <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
          </Carousel>
          
          {/* 最新产品 */}
          <div className="products">
            <p className="allProduct">热门商品</p>
            <ul className="listsmsg">
              {this.showRows()}
            </ul>
          </div>

          {/* 热点新闻 */}
          <div className="products">
            <p className="allProduct">热点新闻</p>
            <ul className="listsmsg">
              {this.showRows()}
            </ul>
          </div>
        </div>
    );
  }
}

export default connect(mapStateToProps,{fetchList})(Home);